<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<html>
<head>
<title>Home</title>

</head>
<body>
<h1>Listing People</h1>
<c:forEach items="${people}" var="v_person">
	<a href="edit?id=${v_person.id}">${v_person.id} -
	${v_person.firstName} ${v_person.lastName}</a>
	<br />
</c:forEach>

<div>
			<div>
		<input type="text"  id="w-input-search" value="">
		<span>
			<button id="w-button-search" type="button">Search</button>
		</span>
	</div>
	
	<script>
	$(document).ready(function() {

		$('#w-input-search').autocomplete({
			source:function(request, response) {
		        $.ajax({
		            url: "getPerson",
		            data: "personName="+$('#w-input-search').val(),
		            dataType: "json",
		            type: "GET",
		            success: function(data) { 
		               // alert("data"+data);
		            	response($.map(data, function(obj) {
		                    return {
		                        label: obj.firstName,
		                        value: obj.lastName,
		                       };
		                }));
		            },
		            error:function(){
		            	console.log("response:	"+response);
		            	alert("error in fetching data");
		            }

		        });
		    }
		});
		
		
	});
	</script>
</div>
<a href="edit"> Add Person</a>
<br>
<a href="../home.htm">Go back to home</a>
</body>
</html>
